<script setup>
import { defineEmits, ref, defineProps } from 'vue'
import OrderTable from './components/OrderTable.vue'
import { getStatisticsOrderCountApi } from '@/apis/order'
const emit = defineEmits(['title'])
const prop = defineProps({
  tab: {
    type: Number,
    default: 100
  }
})
emit('title', '订单管理')
const orderTableRef = ref(null)
const orderStatus = ref(prop.tab)
const status = ref(prop.tab)
const countList = ref([])

const getStatisticsOrderCount = async () => {
  const res = await getStatisticsOrderCountApi()
  countList.value = res.data.data
}

const tabChange = (e) => {
  status.value = e
}

// 初始化统计数据
getStatisticsOrderCount()

// 刷新统计数据
const onUpdateStatus = () => {
  getStatisticsOrderCount()
}

// 统计各个订单状态的数量
const findOrderStatusCount = (val) => {
  let count = 0
  if (val === null) {
    countList.value.forEach((item) => {
      if (item) {
        count += item.count
      }
    })
    return count
  } else if (val === 200) {
    countList.value.forEach((item) => {
      if (item.orderStatus < 0) {
        count += item.count
      }
    })
    return count
  } else {
    const item = countList.value.find((item) => item.orderStatus === val)
    count = item ? item.count : 0
    return count
  }
}
</script>

<template>
  <div class="page">
    <el-tabs
      class="demo-tabs"
      @tab-change="tabChange"
      v-model="orderStatus"
      type="border-card"
    >
      <el-tab-pane :name="100">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(null)" class="item">
              全部订单
            </el-badge>
          </div>
        </template>
        <OrderTable
          v-if="orderStatus === 100"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>
      <el-tab-pane :name="1" label="待配货">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(1)" class="item">
              待配货
            </el-badge>
          </div>
        </template>
        <OrderTable
          v-if="orderStatus === 1"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>

      <el-tab-pane :name="2" label="待出库">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(2)" class="item">
              待出库
            </el-badge>
          </div>
        </template>
        <OrderTable
          v-if="orderStatus === 2"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>

      <el-tab-pane :name="3" label="派送中">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(3)" class="item">
              派送中
            </el-badge>
          </div>
        </template>

        <OrderTable
          v-if="orderStatus === 3"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>
      <el-tab-pane :name="4" label="已完成">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(4)" class="item">
              已完成
            </el-badge>
          </div>
        </template>

        <OrderTable
          v-if="orderStatus === 4"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>
      <el-tab-pane :name="200" label="已取消">
        <template #label>
          <div>
            <el-badge :value="findOrderStatusCount(200)" class="item">
              已取消
            </el-badge>
          </div>
        </template>

        <OrderTable
          v-if="orderStatus === 200"
          :status="status"
          ref="orderTableRef"
          @update:status="onUpdateStatus"
        ></OrderTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs {
  --el-tabs-header-height: 3rem;
  --el-font-size-base: 1rem;
}
</style>
